<!DOCTYPE html>
<html>
	<!--老用户的邀请记录-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				padding:0;
				background: #f1f1f1;
				overflow-x: hidden;
			}
			#hea{
				position: fixed;
				width: 100%;
				height: 320px;
				background: url(skin/img/red-bg.png) #f1f1f1 no-repeat center top;
				background-size: 100% 140px;
				border-top:1px solid #df3121 ;
			}
			#hea>.hea-ava{
				width: 80px;
				height: 80px;
				margin:100px auto 0;
			}
			.title-num{
				padding:10px 0;
				font-size:55px;
				text-align:center;	
			}
			.notice{
				font-size:5px;
				text-align:center;	
				color:#3573FA;
			}
			.inva-btn{
				width:120px;
				height:26px;
				margin:15px auto;
				text-align: center;
				line-height: 26px;
				background: #DF3121;
				color:rgba(255,255,255,.6);
				border-radius: 20px;
			}
			#inva-type{
				position: fixed;
				width: 100%;
				top:321px;
				height: 60px;
				display: flex;
				background: url(skin/img/list-bg.png) no-repeat center bottom #f1f1f1;
				background-size: 100% 65px;
			}
			#inva-type>div{
				flex: 1 1 0;
				height: 100%;
				text-align: center;
			}
			#inva-type>div>p:first-of-type{
				font-size: 25px;
			}
			#inva-type>div>p:last-of-type{
				padding: 8px 0;
				font-size: 12px;
			}
			.inva-tile{
				position: fixed;
				display: flex;
				width: 100%;
				top:380px;
				height: 30px;
				background: white;
			}
			.inva-tile>p{
				flex: 10 1 0;
				font-size:15px;
				line-height: 20px;
			}
			.inva-tile>.title-font{
				flex:11 1 0;
				text-align: center;
				line-height: 30px;
			}
			#inva-list{
				position: fixed;
				width: 100%;
				height: calc( 100vh - 321px - 60px - 30px);
				overflow-y: auto;
				top:410px;
			}
			.list-wrap{
				padding:0 20px;
				background: white;
			}
			.list{
				display: flex;
				padding:10px 0;
				height: 35px;
				border-bottom:1px solid #eee;
			}
			.list > div{
				flex:1 1 0;
			}
			.list > div:nth-of-type(1){
				display: flex;
				align-items: center;
			}
			.list > div:nth-of-type(1)>span {
				font-size:14px;
				text-indent: 5px;
				color: rgba(0,0,0,.7);
			}
			.list > div:nth-of-type(2){
				text-align: center;
				line-height: 35px;
				color: rgba(0,0,0,.5);
			}
			.list > div:nth-of-type(3){
				padding-top:4px;
				text-align: right;
			}
			.list > div:nth-of-type(3)>p:first-of-type{
				font-size:13px;
				color:#e36156;
			}	
			.list > div:nth-of-type(3)>p.active{
				color: #5284fa;
			}
			.list > div:nth-of-type(3)>p:last-of-type{
				padding-right: 5px;
				padding-top:2px;
				font-size:10px;
				
			}	
			
			/*隐藏滚动条*/
			#inva-list::-webkit-scrollbar {
			    width:0px;
			    height:0px;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<div id="hea">
				<div class='hea-ava'>
					<img src="skin/img/avata-1.png" width="100%" height="100%"/>
				</div>
				<h1 class='title-num'>3546</h1>
				<p class='notice'>邀请奖励已存入您的BTC钱包</p>
				<div class='inva-btn' @click='plus.webview.open("invitation-friend.html","invitationFriend")'>立即邀请</div>
			</div>
			<div id="inva-type">
				<div>
					<p>65</p>
					<p>个人邀请好友</p>
				</div>
				<div>
					<p style='color:#DF3121'>2565</p>
					<p>未激活奖励</p>
				</div>
				<div>
					<p style='color:#608EFB'>2565</p>
					<p>已激活</p>
				</div>
			</div>
			<div class="inva-tile">
				<p style='text-align: right;padding-left: 20px;'>________________</p>
				<p class='title-font'>邀请记录</p>
				<p style='text-align: left;padding-right: 20px;'>________________</p>
			</div>
			<div id="inva-list">
				
				<div class="list-wrap">
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p>18 BTC</p>
							<p>未激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
					<div class="list">
						<div>
							<img src="skin/img/icon-list.png" width="35px" height='35px'/>
							<span>微信name</span>
						</div>
						<div>领取了jdsjhf红包</div>
						<div>
							<p class='active'>18 BTC</p>
							<p>已激活</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					
				},
				methods:{
					
				}
			});
		</script>
	</body>
</html>


